<template>
  <view class="container">
    <view v-if="true">
      <!-- 分类 -->
      <view class="item" @click="choosetype">
        <view>选择分类</view>
        <view>
          {{ addshop.categorys || '请选则' }}
          <uni-icons type="right" size="18"></uni-icons>
        </view>
      </view>
      <!-- 店铺名称 -->
      <view class="item">
        <view>店铺名称</view>
        <view>
          <input class="ipt" type="text" placeholder="请输入" v-model="addshop.shopName" />
        </view>
      </view>
      <!-- 手机号 -->
      <view class="item">
        <view>手机号</view>
        <view>{{ addshop.phoneNo }}</view>
      </view>
      <!-- 国家-->
      <view class="item" @click="choosecrountry">
        <view>国家/城市</view>
        <view>
          {{ this.addshop.country + this.addshop.region || '请选择' }}
          <uni-icons type="right" size="18"></uni-icons>
        </view>
      </view>
      <!-- 详细地址-->
      <view class="item">
        <view>详细地址</view>
        <view>
          <input class="ipt" type="text" placeholder="请输入" v-model="addshop.addr" />
        </view>
      </view>
      <!-- 开店说明 -->
      <view class="shopintruduction">
        <view>开店说明</view>
        <textarea class="text" cols="30" rows="10" placeholder="请输入" v-model="addshop.shopDesc"></textarea>
      </view>
      <!-- 提示 -->
      <view class="tip">上传文件（身份证、护照、营业执照、税号照片、最 多9张照片）</view>
      <!-- 上传图片 -->
      <view class="uploadimg"><upload @imglist="reciveimg"></upload></view>
      <!-- 申请费 -->
      <view class="item">
        <view>申请费</view>
        <view>
          <image src="../static/okmoney.png" style="width: 36rpx; height: 36rpx; vertical-align: middle"></image>
          <text style="color: #61bdb2; font-size: 30rpx">1000元人民币</text>
        </view>
      </view>
      <view class="applybtn">立即申请</view>
    </view>
    <waitingApprove v-if="approvestatus"></waitingApprove>
    <refuseApprove v-if="approvestatus"></refuseApprove>
    <approveOk v-if="approvestatus"></approveOk>
  </view>
</template>

<script>
import upload from '../component/upload.vue';
import refuseApprove from './components/refuseapprove.vue';
import waitingApprove from './components/waitingapprove.vue';
import approveOk from './components/approveok';
import { getuerinfo, getmoney, checkshopstatus, addshop, phonehead } from '@/services/shop.js';
export default {
  components: {
    upload,
    refuseApprove,
    waitingApprove,
    approveOk
  },
  data() {
    return {
      approvestatus: false,
      addshop: {
        categorys: '',
        shopName: '',
        phoneNo: '',
        region: '',
        country: '',
        addr: '',
        shopDesc: '',
        aptitude: '',
        amount: 0,
        currency: 0
      },
      area: []
    };
  },
  onLoad(vlaue) {
    // 获取活动类型
    this.addshop.categorys = vlaue.type;
    if (vlaue.type) {
      uni.setStorageSync('category', this.addshop.categorys);
    }
    this.getuserphone();
    console.log('国家地区----', vlaue.area);
    // 获取国家和地区
    if (vlaue.area) {
      this.area = vlaue.area.split(',');
      this.addshop.country = this.area[0];
      this.addshop.region = this.area[1];
    }
    // 获取店铺保证金
    this.getshopmoney();
    // 获取店铺的审核状态
    this.getshopstatus();
  },
  onShow() {
    this.addshop.categorys = uni.getStorageSync('category');
  },
  methods: {
    // 获取手机号前缀
    async getphonehead() {
      const res = await phonehead();
      console.log('手机号前缀---', res);
    },
    // 接受上传的图片
    reciveimg(value) {
      console.log('子组件返回的图片----', value);
      this.addshop.aptitude = value.length == 1 ? value.join(' ') : value.join(',');
      console.log(this.addshop.aptitude);
    },
    // 选择分类
    choosetype() {
      uni.navigateTo({
        url: '/sub_my/choosetype/choosetype'
      });
    },
    // 选择国家
    choosecrountry() {
      uni.navigateTo({
        url: '/sub_goodstype/choosecountre/choosecountre'
      });
    },
    // 获取用户手机号
    async getuserphone() {
      const res = await getuerinfo();
      console.log('用户信息----', res);
      this.addshop.phoneNo = res.result.data.userPhone;
    },
    // 获取店铺保证金
    async getshopmoney() {
      const res = await getmoney();
      console.log('获取店铺保证金---', res);
    },
    // 查询店铺的审核状态
    async getshopstatus() {
      const res = await checkshopstatus();
      console.log('店铺的审核状态----', res);
    },
    // 新增店铺
    async addshopfn() {
      const res = await addshop();
      console.log('新增店铺的接口返回值---', res);
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  box-sizing: border-box;
  background-color: #fff;
  margin-top: 10rpx;
  // 审批状态
  .approvestatus {
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 750rpx;
    height: 180rpx;
    background: #61bdb2;
    color: #fff;
    padding: 0 27rpx;
    font-size: 28rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }
  .item {
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 750rpx;
    height: 100rpx;
    background: #ffffff;
    padding: 0 34rpx 0 34rpx;
    .ipt {
      box-sizing: border-box;
      padding: 18rpx 30rpx;
      width: 442rpx;
      height: 78rpx;
      background: #f3f3f3;
      border-radius: 16rpx 16rpx 16rpx 16rpx;
    }
  }
  .shopintruduction {
    box-sizing: border-box;
    width: 750rpx;
    height: 408rpx;
    background: #ffffff;
    padding: 0 34rpx;
    margin-top: 30rpx;
    .text {
      box-sizing: border-box;
      width: 690rpx;
      height: 292rpx;
      background: #f8f8f8;
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      padding: 32rpx 20rpx;
      margin-top: 10rpx;
    }
  }
  .tip {
    box-sizing: border-box;
    padding: 0 34rpx;
    width: 750rpx;
    font-size: 30rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #222222;
  }
  .uploadimg {
    box-sizing: border-box;
    padding: 0 34rpx;
    margin-top: 30rpx;
  }
  .applybtn {
    width: 640rpx;
    height: 100rpx;
    background: #61bdb2;
    text-align: center;
    line-height: 100rpx;
    margin-top: 48rpx;
    margin-left: 56rpx;
    color: #fff;
    border-radius: 50rpx 50rpx 50rpx 50rpx;
  }
}
</style>